{{ template "header_start" . }}

<link rel="stylesheet" href="/static/css/global/global.css">

<style>
#jk {
	/*padding: 20px;*/
	/*border: 1px solid orange;*/
/*	display: none;*/
	position: absolute;
	left: 30px;
	top: 80px;
	margin: 20px;
	background: #ffffff;
	border: thin inset rgba(100,150,230,0.5);
	cursor: pointer;
}
#readout {
	margin-top: 10px;
	margin-left: 15px;
	color: blue;
}

/*Transform style*/
.menu {
	display:none;
}
.menu ul {
    border-top: 15px solid black;
    padding: 0 10px;    
 }
 .menu ul li a{
    color: #fff;
    float: left;
    margin: 0 5px;
    font-size: 14px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    width: 65px;
    padding: 10px 5px;
    background: #151515;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    -moz-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;
    -webkit-box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;
    box-shadow: 0 0 1px #ccc,inset 0 0 2px #fff;
    text-shadow: 0 1px 1px #686868;
    text-decoration: none;
 }
 .menu ul li.translate a{
    background: #2EC7D2;
 }
 .menu ul li.translate-x a {
    background: #8FDD21;
 }
 .menu ul li.translate-y a {
    background: #F45917;
 }
 .menu ul li.rotate a {
    background: #D50E19;
 }
 .menu ul li.scale a {
    background: #cdddf2;
 }
 .menu ul li.scale-x a {
   background: #0fDD21;
 }
 .menu ul li.scale-y a {
   background: #cd5917;
 }
 .menu ul li.skew a {
   background: #519;
 }
 .menu ul li.skew-x a {
   background: #D50;
 }
 .menu ul li.skew-y a {
   background: #E19;
 }
 .menu ul li.matrix a {
   background: #919;
 }        
 .menu ul li.translate a:hover {
     -moz-transform: translate(-10px,-10px);
     -webkit-transform: translate(-10px,-10px);
     -o-transform: translate(-10px,-10px);
     -ms-transform: translate(-10px, -10px);
     transform: translate(-10px,-10px);
  }
  .menu ul li.translate-x a:hover {
    -moz-transform: translateX(-10px);
    -webkit-transform: translateX(-10px);
    -o-transform: translateX(-10px);
    -ms-transform: translateX(-10px);
    transform: translateX(-10px);          
  }
  .menu ul li.translate-y a:hover {
     -moz-transform: translateY(-10px);
     -webkit-transform: translateY(-10px);
     -o-transform: translateY(-10px);
     -ms-transform: translateY(-10px);
     transform: translateY(-10px);          
  }
  .menu ul li.rotate a:hover {
   -moz-transform: rotate(45deg);
   -webkit-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);          
 }
 .menu ul li.scale a:hover {
   -moz-transform: scale(0.8,0.8);
   -webkit-transform: scale(0.8,0.8);
   -o-transform: scale(0.8,0.8);
   -ms-transform: scale(0.8,0.8);
   transform: scale(0.8,0.8);          
 }
 .menu ul li.scale-x a:hover {
    -moz-transform: scaleX(0.8);
    -webkit-transform: scaleX(0.8);
    -o-transform: scaleX(0.8);
    -ms-transform: scaleX(0.8);
    transform: scaleX(0.8);          
 }
.menu ul li.scale-y a:hover {
     -moz-transform: scaleY(1.2);
     -webkit-transform: scaleY(1.2);
     -o-transform: scaleY(1.2);
     -ms-transform: scaleY(1.2);
     transform: scaleY(1.2);          
 }
 .menu ul li.skew a:hover {
     -moz-transform: skew(45deg,15deg);
     -webkit-transform: skew(45deg,15deg);
     -o-transform: skew(45deg,15deg);
     -ms-transform: skew(45deg,15deg);
     transform: skew(45deg,15deg);          
  }
  .menu ul li.skew-x a:hover {
    -moz-transform: skewX(-30deg);
    -webkit-transform: skewX(-30deg);
    -o-transform: skewX(-30deg);
    -ms-transform: skewX(-30deg);
    transform: skewX(-30deg);          
 }
 .menu ul li.skew-y a:hover {
    -moz-transform: skewY(30deg);
    -webkit-transform: skewY(30deg);
    -o-transform: skewY(30deg);
    -ms-transform: skewY(30deg);
    transform: skewY(30deg);          
 }
 .menu ul li.matrix a:hover {
    -moz-transform: matrix(1,1,-1,0,0,0);
    -webkit-transform: matrix(1,1,-1,0,0,0);
    -o-transform: matrix(1,1,-1,0,0,0);
    -ms-transform: matrix(1,1,-1,0,0,0);
    transform: matrix(1,1,-1,0,0,0);          
  }
  .menu ul li.transform-origin a {
    -moz-transform-origin: left top;
    -webkit-transform-origin: left top;
    -o-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
  }
  #grid {
      background-color: rgba(230,230,230,0.8);
      border: 1px solid gray;
      border-radius: 10px;
      width: 300px;
      height: 100px;
      cursor: text;
      /*overflow: hidden;*/
      overflow-y: auto;
      overflow-x: hidden;
      word-wrap: break-word;
      /*word-break: break-all;*/
  }
  #grid:focus {
      border-radius: 10px;
  }

</style>

{{ template "header_end" .}}

<div id="mousepos"></div>
<script>
/*
$(document).bind('click', function(){
    var posx = window.pageXOffset;
  var posy = window.pageYOffset;
  alert(posx+","+posy);
});
*/

</script>

<div id='radio'>
	<input type='radio' id='repeatRadio' name='patternRadio' checked/>repeated
	<input type='radio' id='repeatXRadio' name='patternRadio' />repeatx
	<input type='radio' id='repeatYRadio' name='patternRadio' />repeaty
	<input type='radio' id='norepeatRadio' name='patternRadio' />norepeat
</div>

<div id="readout"></div>
<canvas id="jk" width="500" height="600">
    You Browser don't support canvas, change a new one
</canvas>
<!-- <script src="/static/js/start/canvas.js" type="text/javascript"></script> -->
<!-- <script src="/static/js/start/clock.js" type="text/javascript"></script> -->
<!-- <script src="/static/js/start/event.js" type="text/javascript"></script> -->
<script src="/static/js/start/pattern.js" type="text/javascript"></script>

<!-- Transform Test -->
<div class="menu">
<ul class="clearfix">
  <li class="item translate"><a href="#">Translate</a></li>
  <li class="item translate-x"><a href="#">TranslateX</a></li>
  <li class="item translate-y"><a href="#">TranslateY</a></li>
  <li class="item rotate"><a href="#">Rotate</a></li>
  <li class="item scale"><a href="#">Scale</a></li>
  <li class="item scale-x"><a href="#">ScaleX</a></li>
  <li class="item scale-y"><a href="#">ScaleY</a></li>
  <li class="item skew"><a href="#">Skew</a></li>
  <li class="item skew-x"><a href="#">SkewX</a></li>
  <li class="item skew-y"><a href="#">SkewY</a></li>
  <li class="item matrix"><a href="#">Matrix</a></li>
</ul>
</div>


{{ template "footer" . }}